<template>
   <div style="width: 40%;">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>

      <el-tree
         class="filter-tree"
         :data="treeData"
         :props="defaultProps"
         accordion
         :filter-node-method="filterNode"
         ref="tree"
      >
      </el-tree>
   </div>
</template>

<script>
import { getCategoryTreeApi } from "@/api/admin"

export default {
   data() {
      return {
         filterText: '',
         treeData: [],
         defaultProps: {
            children: 'children',
            label: 'name'
         }
      }
   },
   created() {
      this.__getCategoryTree();
   },
   watch: {
      filterText(val) {
         this.$refs.tree.filter(val);
      }
   },
   methods: {
      async __getCategoryTree() {
         const res = await getCategoryTreeApi();
         if (!res) return;
         this.treeData = res.data;
      },
      filterNode(value, data) {
         if (!value) return true;
         return data.name.indexOf(value) !== -1;
      }
   }
}
</script>

<style scoped>
.filter-tree {
   margin-top: 10px;
}
</style>